<#assign packageName = content.items.controller.packageName>
<#assign tableName = content.content.tableName>
<#assign lowerName = content.content.lowerName>
<#assign camelName = content.content.camelName>
<template>
  <div :class="['right_view']" style="display: flex; height: 100%">
    <div class="right_main">
      <!-- 查询 -->
      <search-view @to-search="handleQuery" @to-reset="resetQuery">
        <el-form  :model="form" :inline="true" label-position="right" label-width="100px">
          <el-form-item label="搜索框">
            <el-input v-model="form.searchValue" placeholder="请输入搜索值" clearable  maxlength="32"/>
          </el-form-item>
        </el-form>
      </search-view>

      <!-- 页头操作按钮 -->
      <div class="operate-btn">
        <div class="btn-left">
          <custom-button content="新增" name="add" placement="left" icon="el-icon-plus" @click.native="handleOperate('add')" />
        </div>
      </div>

      <!-- 列表 -->
      <el-table ref="mytable" v-loading="loading"  border fit stripe height="auto" :data="tableData"
                @row-click="rowClick"
                @selection-change="handleSelectionChange"
                @row-dblclick="handleRowDblclick"
                @sort-change="handleChangeSort">

        <el-table-column label="序号" align="center" type="index" width="50" fixed="left"/>
        <el-table-column fixed="left" type="selection" width="55" align="center"/> <!--序号复选框 -->
        <template v-for="(item, index) in tableHeader">
          <el-table-column :key="item.prop + index" :prop="item.prop" :label="item.label" :formatter="statusFormat" align="center" v-if="item.isShow" :width="item.width" :sortable="item.sortable?'custom':false" :min-width="item.minWidth" :show-overflow-tooltip="true"/>
        <#--<el-table-column :key="item.prop + index" :prop="item.prop" :label="item.label" align="center" v-if="item.isShow" :width="item.width" :sortable="item.sortable?'custom':false" :min-width="item.minWidth" :show-overflow-tooltip="true">
           <template slot-scope="scope">
             <!--需要字典值转码的字段过滤掉&ndash;&gt;&lt;#&ndash;替换相应需要转码的字段&ndash;&gt;
             <div v-if="item.prop !== '需要转码的字段' && item.prop !== 'flowstatus'">{{scope.row[item.prop]}}</div>
             <div v-else>{{statusFormat(item.prop, scope.row)}}</div>
            </template>
         </el-table-column>-->
        </template>

        <!-- 行内操作按钮 -->
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right"  width="200">
          <template slot-scope="scope">
            <custom-button content="修改" @click.native="handleOperate('edit',scope.row)" name="edit" style="margin-right: 10px" placement="left" icon="el-icon-edit"/>
            <custom-button content="删除"  @confirm="singleDelete(scope.row)"  name="delete" placement="left" icon="el-icon-delete"/>
            <el-popover placement="left" trigger="hover">
              <custom-button content="详细" name="check" icon="el-icon-view" @click.native="handleOperate('check',scope.row)" />
                <el-button slot="reference">···</el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>

      <!--底部组件-->
      <div class="footer-div">
        <#--分页-->
        <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
        <#--刷新-->
        <right-toolbar :table-header="tableHeader" @query-table="getList" @column-change="columnChange"/>
      </div>
    </div>

    <!-- 弹框 -->
    <add-module ref="addModule" :show.sync="addDialog" :dialog-type="dialogType"/>
  </div>
</template>

<script>
import RightToolbar from '@/components/RightToolbar/index'
import addModule from './addModule'
<#list "${packageName}"?split(".") as package>
<#if package!="com" && package!="ibp" && package!="controller">
import {get${camelName?cap_first}List, delete${camelName?cap_first}} from '@/api/${package}/${package}'
</#if>
</#list>

export default {
  components: {addModule,RightToolbar},
  data() {
    return {
      form: {
        searchValue: '',
        menuId: '',
      },
      addDialog: false,
      dialogType: '',
      loading: false,
      businesskey: '',
      total: 0,
      tableData: [],
      checkboxIds: [],//复选框选中的值
      selectDict: [//数据字典
        {dictValue:'1',dictLabel:'选项1'},
        {dictValue:'2',dictLabel:'选项2'},
        {dictValue:'3',dictLabel:'选项3'}
      ],
      /*表头*/
      tableHeader: [
            <#list content.content.fields as item>
             <#if item.primary == true>
             <#else>
        {label: '${item.fieldRemark?default("")}',prop: '${item.fieldName}',align: 'center', width: 200,sortable: false,isShow: true,disabled: true}<#if item?has_next>,</#if>
             </#if>
            </#list>
      ],
      queryParams: {
        pageNum: 1,
        pageSize: this.$store.state.config.pageSize
      }
    }
  },
  computed: {
    themesize() {
      return this.$store.state.settings.size
    },
  },
  created() {
    // 获取字典数据
    //  this.getDicts('字典key').then((response) => {
    //this.selectDict = response.data//填充字典数组
    // })
    this.getList()
  },
  methods: {
    // 列表字典字段转换
    statusFormat(row, column, cellValue) {
      if (column.property == 'flowstatus') return this.selectDictLabel(this.selectDict, row.flowstatus)
      return cellValue
    },
    // 查询
    handleQuery() {
      this.getList()
    },
    // 重置
    resetQuery() {
      this.form = {}
      this.$refs.mytable.clearSort()
      this.queryParams = {
        pageNum: 1,
        pageSize: this.$store.state.config.pageSize
      },
      this.getList()
    },
    // 查询列表
    getList() {
      this.loading = true
      this.form.menuId=this.$store.state.user.menuID
      get${camelName?cap_first}List(this.queryParams,this.form).then(res => {
        if(res.code === 200) {
          this.tableData = res.rows
          this.total = res.total
          this.loading = false
        }
      }).catch(err =>{
        this.loading = false
      })
    },
    //按钮操作
    handleOperate(name, row) {
      this.dialogType = name
      // 新增
      if(name === 'add') this.handleAddForm()
      // 修改
      if(name === 'edit') this.handleEditForm(row)
      // 详情
      if(name === 'check') this.handleCheck(row)
    },
    // 新增
    handleAddForm() {
      this.addDialog = true
      this.$nextTick(() => {
        const randomID = this.getRandomId(32)// 初始化id
        this.$refs.addModule.getRandomID(randomID)
        this.businesskey = ''
        this.$refs.addModule.$refs['customupload'].handleGetFileList(this.businesskey,'${camelName}')
      })
    },
    // 修改
    handleEditForm(row) {
      this.addDialog = true
      this.$nextTick(() => {
        this.$refs.addModule.getForm(row)
                <#if content.content.primaryField??>
                <#assign assign_idFieldName = content.content.primaryField[0].fieldName>
        this.$refs.addModule.$refs['customupload'].handleGetFileList(row.${assign_idFieldName},'${camelName}')
                </#if>
      })
    },
    // 查看
    handleCheck(row) {
      this.addDialog = true
      this.$nextTick(() => {
        this.$refs.addModule.getForm(row)
                <#if content.content.primaryField??>
                <#assign assign_idFieldName = content.content.primaryField[0].fieldName>
        this.$refs.dispModule.$refs['customupload'].handleGetFileList(row.${assign_idFieldName},'${camelName}')
                </#if>
      })
    },
    // 删除
    singleDelete(row) {
            <#if content.content.primaryField??>
            <#assign assign_idFieldName = content.content.primaryField[0].fieldName>
            </#if>
      const ${assign_idFieldName} = [row.${assign_idFieldName}]
      delete${camelName?cap_first}(${assign_idFieldName}).then(res => {
        if(res.code === 200) {
          this.getList()
          this.$message({type: 'success',message: '删除成功！'})
        }
      })
    },
    // 复选框选中的值
    handleSelectionChange(selection) {
            <#if content.content.primaryField??>
            <#assign assign_idFieldName = content.content.primaryField[0].fieldName>
      this.checkboxIds = selection.map(item => item.${assign_idFieldName})
            </#if>
    },
    // 选中当前行
    rowClick(row) {
      this.$refs.mytable.toggleRowSelection(row)
    },
    // 双击事件
    handleRowDblclick(row) {
      if(row.flowstatus === '0') {
        this.handleOperate('edit', row)
      }else {
        this.handleOperate('check', row)
      }
    },
    // 排序
    handleChangeSort(column) {
      let sortInfo = this.getSortInfo(column)
      this.form = {
        ...this.form,
        ...sortInfo
      }
      this.getList()
    },
    //列改变事件
    columnChange(data) {
      this.tableHeader = data
      this.$refs.mytable.doLayout()
    },
  }
}
</script>


<style scoped lang="scss">
.btn-left {
  display: flex;
}
</style>
